<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

import headerUtil from "./base/common/headerUtil.vue";
import couponUtil from "./base/cart/couponUtil.vue";
import homeSeckillUtil from "./base/home/homeSeckillUtil.vue";
import cartLineUtil from "./base/cart/cartLineUtil.vue";
import cartUtil from "./base/cart/cartUtil.vue";

import productItemUtil from "./base/personal/productItemUtil.vue";
import notLoginUtil from "./base/cart/notLoginUtil.vue";
import reqApis from "../req/reqApis.js";


const currentData = ref<any>({
  headerObj: {
    showType: 2
  },
  currentPos: 0,
  pageIndex: 1,
  timer: null,
  isStop: false,
  list: []
});

const scrollOutRef = ref();


const headerFn = (i: any) => {
  if(i == 0) {
    history.back();
  }
};
const toTop = () => {
  let distance = currentData.value.currentPos; //获得当前高度
  let step = distance/50; //每步的距离
  clearInterval(currentData.value.timer);
  currentData.value.timer = setInterval(() => {
    if(distance>0) {
      distance-= step;
    }else {
      distance = 0;
      clearInterval(currentData.value.timer);
    }
    nextTick(() => {
      scrollOutRef.value.scrollTop = distance;
    })
  },10)
};
const getProductListFn = () => {
  if(!currentData.value.isStop){
    let params = {
      page: currentData.value.pageIndex,
      size: 10
    };
    reqApis.getProductListApi(params).then(res => {
      if(res.data.length>0){
        currentData.value.list.push(...res.data);
      }else{
        currentData.value.isStop = true;
      }
    })
  }
};
const scrollData = () => {
  let outH = scrollOutRef.value.scrollHeight,
      currentH = scrollOutRef.value.offsetHeight,
      offH = scrollOutRef.value.scrollTop;
      currentData.value.currentPos = Math.ceil(offH);
      if(offH>20) {
        currentData.value.headerObj.isRed = true;
      }else {
        currentData.value.headerObj.isRed = false;
      }
      if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      getProductListFn();
    }
};
   

getProductListFn();

</script>
<template>
  <section class="cart">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn">购物车</headerUtil>
    <div class="top-icon" @click="toTop()"></div>
    <div class="content" @scroll.passive="scrollData" ref="scrollOutRef">
      <notLoginUtil></notLoginUtil>
      <!-- <couponUtil></couponUtil>
      <cartLineUtil>京东秒杀</cartLineUtil>
       <homeSeckillUtil></homeSeckillUtil> -->
      <cartLineUtil>可能你还想要</cartLineUtil>
      <div class="list">
        <productItemUtil :obj="item" v-for="(item, index) in currentData.list" :key="index"></productItemUtil>
      </div>
    </div>
    <cartUtil></cartUtil>
  </section>
</template>

<style lang="less" scoped>
.cart {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .top-icon {
    position: fixed;
    width: .4rem;
    height: .4rem;
    bottom: .6rem;
    right: 0;
    z-index: 6;
    background: url("../assets/images/top-icon-2.png") center no-repeat,rgba(0,0,0,.7);
    background-size: 60%;
    border-radius: .03rem 0 0 .03rem;
    }
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .list {
      background: white;
      overflow: hidden;
    }
  }
}
</style>

